<template>
	<view class="add-app-white-search-page">
		<view class="custom-search">
			<uni-search-bar class="search-input" placeholder="搜索应用名称" bgColor="#EEEEEE" clearButton="always" cancelButton="none" @confirm="onSearch"  v-model="keyword" @cancel="onCancel" @clear="clear"></uni-search-bar>
			<view class="search-txt" @click="submit">搜索</view>
		</view>
		<view class="list">
			<list v-if="list.length > 0">
				<view v-for="(app, index) in list" :key="Math.random() * 1000"  class="list-item">
					<view class="slot-box">
						 <image style="width: 50px; height: 50px;" :src="app.image" />
					</view>
					<view class="right-icon">
						 <view class="title">{{ app.name }}</view>
					</view>
					<view class="rightIcon postion-about">
					   <view class="right-icon" @click="() =>add(app)">添加</view>
					</view>
				</view>
			</list>
			<view  v-else>
				<Empt description="暂无app" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted } from 'vue'
	import { homeServer } from '@/common/index'
	import Empt from "@/components/Empt/index.vue"
	import { useStudentListStore } from "@/stores/useStudentList.js"
	import { urlHelp } from '@/utils/index'
	const studentStore = useStudentListStore();
	const curStd = computed(() => studentStore.currentStudent);
	const page = ref(1);
	const size = ref(10);
	const allList = ref([]);
	const list = ref([])
	// 获取应用
	const appList = async () => {
		const studentId = curStd.value?.id;
		if(studentId){
			try{
				// const params = {
				// 	studentId,
				// 	page: page.value,
				// 	size: size.value
				// };
				const {status, data} = await homeServer.general({studentId})
				console.log('获取数据',status, data)
				if(status === '200'){
					const allApp = data?.map(item => urlHelp.imgAddPrefix(item, 'image'));
					list.value = allApp
					allList.value = allApp
				}
			}catch(e){
				console.log(e)
				//TODO handle the exception
			}
		} else {
			console.log('未发现学生id')
		}
	}
	
	const add = async (app) => {
		const studentId = curStd.value?.id;
		if(studentId){
			try{
				const prams = {
					studentId,
					appName: app.name,
					id: app.id,
					packageName: app.packageName
				}
				const {status, data} = await homeServer.appWhitelistAdd(prams);
				if(status === '200'){
					uni.showToast({
						title:"添加成功",
						icon:"success",
						success() {
							appList()
						}
					})
				}
			}catch(e){
				console.log(e)
				//TODO handle the exception
			}
		} else {
			console.log('未获取到学生id')
		}
	}
	onMounted(() => {
		appList()
	})

	
	const keyword = ref('');
	const onSearch = async ({value}) => {
		const detail = value
		if(detail === ""){
			appList();
			keyword.value = detail;
			return;
		}
		await appList();
		list.value = allList.value.filter(app => app.name.includes(detail))
		keyword.value = detail;
	}
	const submit = () => {
		onSearch({value: keyword.value})
	}
	const onCancel = (r) => { 
		console.log('取消')
		keyword.value = ""
		appList();
	}
	const clear = () => {
		keyword.value = ""
		appList();
	}
	
	
</script>


<style lang="scss">
	page {
		background-color: #f5f9fa;
	}
	
	.list-item{
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 30upx;
		.slot-box{
			margin-left: 30upx;
		}
		.postion-about{
			position: absolute;
			right: 30upx;
			// top: 37%;
		}
	}
	
	.add-app-white-search-page{
		.list{
			.title{
				margin-left: $appIconLeftMarg;
				color: #000;
				font-size: $appIconTxt;
				height:100%;
				display: flex;
				align-items: center;
			}
			.rightIcon{
				height:inherit;
				display: flex;
				align-items: center;
				.right-icon{
					width:100upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					font-size: 32upx;
					background-color: #2bc888;
					color: #fff;
					border-radius: 30upx;
				}
			}
		}
	}
	
	.custom-search{
		display: flex;
		align-items: center;
		width: 100%;
		.search-input{
			width: 100%;
		}
		.search-txt{
			width: 100upx;
			font-size: 28upx;
			color: #2d2d2d;
		}
	}
</style>

<style scoped lang="scss">
	.add-app-white-search-page{
		.list{
			background-color: #fff;
			margin-top: 40upx;
		}
	}
</style>